{extend name="base"}
{block name="resources"/}
  <style>
    .form-horizontal{
      position: relative;
    }
    .form-horizontal .alert{
      position: absolute;
      top: 80%;
      left: 40%;
      width: 100px;
    }
  </style>
{/block}
{block name="body"}
<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="{:url('system/links')}">友情链接</a></li>
  <li class="active">编辑友情链接</li>
</ol>
<form class="form-horizontal" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">链接名称</label>
    <div class="col-sm-4">
      <input type="hidden" name="id" placeholder="id" value="{$linksInfo.id}">
      <input type="text" class="form-control" id="link_name" name="link_name" placeholder="链接名称" value="{$linksInfo.link_name}">
    </div>
  </div>
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">链接地址</label>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="link_url" name="link_url" placeholder="链接地址" value="{$linksInfo.link_url}">
    </div>
  </div>
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">排序</label>
    <div class="col-sm-1">
      <input type="text" class="form-control" id="orderby" name="orderby" placeholder="排序" value="{$linksInfo.orderby}">
    </div>
  </div>
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">是否新窗口打开</label>
    <div class="col-sm-2">
      <input type="hidden" name="target" value="{$linksInfo.target}">
      <div class="btn-group" role="group" id="select_target">
        {switch name=$linksInfo.target}
          {case value="1"}
            <button type="button" class="btn btn-danger" data-id="1">是</button>
            <button type="button" class="btn btn-default" data-id="0">否</button>
          {/case}
          {case value="0"}
            <button type="button" class="btn btn-default" data-id="1">是</button>
            <button type="button" class="btn btn-danger" data-id="0">否</button>
          {/case}
        {/switch}
      </div>
    </div>
  </div>
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">是否显示</label>
    <div class="col-sm-2">
      <input type="hidden" name="is_show" value="{$linksInfo.is_show}">
      <div class="btn-group" role="group" id="select_show">
        {switch name=$linksInfo.is_show}
          {case value="1"}
            <button type="button" class="btn btn-danger" data-id="1">是</button>
            <button type="button" class="btn btn-default" data-id="0">否</button>
          {/case}
          {case value="0"}
            <button type="button" class="btn btn-default" data-id="1">是</button>
            <button type="button" class="btn btn-danger" data-id="0">否</button>
          {/case}
        {/switch}
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-11">
      <button type="button" class="btn btn-primary" id="submit">确认提交</button>
    </div>
  </div>
  <div class="alert alert-success none" role="alert">修改成功</div>
</form>
<script>
  $('#select_target').on('click','button',function(event) {
    var valId=$(this).attr('data-id');
    $(this).parent('#select_target').siblings('input').val(valId);
    $(this).siblings().removeClass('btn-danger btn-default').end().siblings().addClass('btn-default').end().addClass('btn-danger');
  });
  $('#select_show').on('click','button',function(event) {
    var valId=$(this).attr('data-id');
    $(this).parent('#select_show').siblings('input').val(valId);
    $(this).siblings().removeClass('btn-danger btn-default').end().siblings().addClass('btn-default').end().addClass('btn-danger');
  });
  $('#submit').on('click',function(){
    var arr=$('form').serialize();
    $.ajax({
      url: '{url("linksEdit")}',
      type: 'post',
      dataType: 'json',
      data: arr,
    })
    .done(function(r) {
      if(r){
        $('.alert').show(300);
        setTimeout(function(){
          $('.alert').hide(300);
        },500);
      }
    })
    .fail(function() {
      console.log("error");
    })
    .always(function() {
      console.log("complete");
    });
    
  })
</script>
{/block}